<template>
    <el-container class="main-layout-container">
        <!-- 顶部 Header -->
        <el-header class="main-header">
            <div class="logo">S3 Browser</div>

            <!-- ============================================================= -->
            <!-- == 【核心修改】将静态文本替换为功能下拉菜单                  == -->
            <!-- ============================================================= -->
            <div class="user-info">
                <el-dropdown @command="handleUserCommand">
                    <span class="el-dropdown-link">
                        <el-icon class="user-icon">
                            <UserFilled />
                        </el-icon>
                        <!-- 用户信息 -->
                        <span>{{ authStore.user?.name || '未登录' }}</span>
                        <el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 【新增】偏好设置入口 -->
                            <el-dropdown-item command="settings" :icon="Tools">
                                偏好设置
                            </el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton" divided>
                                登出
                            </el-dropdown-item>
                            <!-- 为未来功能预留的位置 -->
                            <!--
                            <el-dropdown-item :icon="EditPen" divided>修改密码</el-dropdown-item>
                            <el-dropdown-item :icon="SwitchButton">退出登录</el-dropdown-item>
                            -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>

        <el-container class="main-body">
            <!-- 左侧一级菜单 (保持不变) -->
            <el-aside width="200px" class="primary-menu" :class="{ 'is-collapsed': layoutStore.isSidebarCollapsed }">
                <el-menu :default-active="$route.path" router :collapse="layoutStore.isSidebarCollapsed">
                    <el-menu-item index="/">
                        <el-icon>
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                                <path
                                    d="M832 364.8h-147.2s-6.4-38.4-32-83.2c-32-44.8-83.2-64-83.2-64s-147.2 0-224 140.8-32 307.2-32 307.2h652.8L832 364.8z"
                                    fill="#475F7B"></path>
                                <path
                                    d="M889.6 428.8H243.2c-25.6 0-44.8 19.2-44.8 44.8v211.2c0 25.6 19.2 44.8 44.8 44.8h646.4c25.6 0 44.8-19.2 44.8-44.8V473.6c0-25.6-19.2-44.8-44.8-44.8z"
                                    fill="#647D96"></path>
                            </svg>
                        </el-icon>
                        <span>Bucket 列表</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <!-- 右侧主内容区 (保持不变) -->
            <el-main class="content-wrapper" :class="{ 'is-collapsed': layoutStore.isSidebarCollapsed }">
                <div class="content-header-primary">
                    <div class="header-left">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>对象存储</el-breadcrumb-item>
                            <el-breadcrumb-item>{{ $route.meta.title || '列表' }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="header-right">
                        <el-button text @click="transportStore.showDrawer()">任务列表</el-button>
                    </div>
                </div>
                <div v-if="isInBucketDetailPage" class="content-header-secondary">
                    <el-button @click="goToBucketList" :icon="ArrowLeft" text class="back-button">
                        Back
                    </el-button>
                    <el-divider direction="vertical" />
                    <span class="page-title">{{ currentBucketName }}</span>
                </div>
                <div class="content-main">
                    <router-view></router-view>
                </div>
            </el-main>
            <TransportDrawer />
        </el-container>

        <!-- 伸缩按钮 (保持不变) -->
        <div class="sidebar-toggler-v2" @click="layoutStore.toggleSidebar()"
            :class="{ 'is-collapsed': layoutStore.isSidebarCollapsed }">
            <el-icon>
                <component :is="layoutStore.toggleIcon" />
            </el-icon>
        </div>
    </el-container>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '@/stores';
import {
    ArrowLeft,
    ArrowRight,
    ArrowDown, // 【新增】导入下拉箭头图标
    UserFilled,  // 【新增】导入用户图标
    Tools,       // 【新增】导入设置图标
    SwitchButton,
} from '@element-plus/icons-vue';
import TransportDrawer from '@/components/TransportDrawer.vue';
import { useTransportStore, useLayoutStore } from '@/stores';
import { ElMessageBox, ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const transportStore = useTransportStore();
const layoutStore = useLayoutStore();

// --- 计算属性 (保持不变) ---
const toggleIcon = computed(() => (layoutStore.isSidebarCollapsed ? ArrowRight : ArrowLeft));
const isInBucketDetailPage = computed(() => !!route.params.bucketName);
const currentBucketName = computed(() => route.params.bucketName || '');

// --- 方法 (保持不变) ---
const goToBucketList = () => {
    router.push({ name: 'BucketList' });
};

const authStore = useAuthStore();

// 下拉菜单命令处理函数
const handleUserCommand = (command) => {
    if (command === 'settings') {
        router.push({ name: 'Settings' });
    } else if (command === 'logout') {
        // 调用登出确认函数
        confirmLogout();
    }
};

// 登出确认逻辑
const confirmLogout = () => {
    ElMessageBox.confirm(
        '您确定要登出吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 用户点击确定，执行登出操作
            authStore.logout();
            ElMessage({
                type: 'success',
                message: '已成功登出',
            });
        })
        .catch(() => {
            // 用户点击取消，不执行任何操作
            // ElMessage({
            //   type: 'info',
            //   message: '已取消登出',
            // });
        });
};

onMounted(() => {
    // transportStore 实例在上面已经创建好了，这里直接使用
    transportStore.loadUnfinishedTasks();
});
</script>

<style scoped>
/* 使用 @import 引入外部样式文件 */
@import './MainLayout.css';
</style>